<template>
    <div class="bottom-tab">
        <span class="tab-item" @click="switchTo('/home')">
           <img :src="$route.path.includes('/home')?tabbarImgArr[0].selected:tabbarImgArr[0].normal" alt="">
           <span :class="{on:$route.path.includes('/home')}">首页</span>
        </span> 
        <span class="tab-item" @click="switchTo('/tuijian')">
           <img :src="'/tuijian' == $route.path?tabbarImgArr[1].selected:tabbarImgArr[1].normal" alt=""> 
           <span :class="{on:'/tuijian' == $route.path}">推荐</span>
        </span>
        <span class="tab-item" @click="switchTo('/search')">
           <img :src="'/search' == $route.path?tabbarImgArr[2].selected:tabbarImgArr[2].normal" alt=""> 
           <span :class="{on:'/search' == $route.path}">搜素</span>
        </span>     
        <span class="tab-item" @click="switchTo('/chat')">
           <img :src="'/chat' == $route.path?tabbarImgArr[3].selected:tabbarImgArr[3].normal" alt=""> 
           <span :class="{on:'/chat' == $route.path}">聊天</span>
        </span>
        <span class="tab-item" @click="switchTo('/me')">
           <img :src="'/me' == $route.path?tabbarImgArr[4].selected:tabbarImgArr[4].normal" alt=""> 
           <span :class="{on:'/me' == $route.path}">个人中心</span>
        </span>                     
    </div>
</template>
../../../static/img/icon_home.png
<script>
export default {
    name:"tabbar",
    data(){
       return{
          tabbarImgArr:[
             {normal:require('../../../static/img/icon_home.png'),selected:require('../../../static/img/icon_home_selected.png')},
             {normal:require('../../../static/img/icon_intro.png'),selected:require('../../../static/img/icon_intro_selected.png')},
             {normal:require('../../../static/img/icon_search.png'),selected:require('../../../static/img/icon_search_selected.png')},
             {normal:require('../../../static/img/icon_chat.png'),selected:require('../../../static/img/icon_chat_selected.png')},
             {normal:require('../../../static/img/icon_mine.png'),selected:require('../../../static/img/icon_mine_selected.png')}
          ]
       }
    },
    methods:{
       //tabbar路由切换
       switchTo(path){
          this.$router.replace(path);
       }
    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
   .bottom-tab
      width 100%
      height 50px;
      background-color #fff
      position fixed
      left 0
      bottom 0
      display flex
      z-index 999
      .tab-item
         display flex
         flex 1
         flex-direction column
         align-items center
         justify-content center
         font-size 14px
         color #666
         img 
            width 35%
            margin-bottom 2px
      .on{
         color red 
      }
         
         


</style>